<template>
  <div>
    <div style="margin-top: 3%;">
      <el-form :inline="true" ref="form" label-width="100px">
        <!-- <el-form-item label="表单名称">
          <el-select v-model="searchParams.resourceTypeTbale" placeholder="请选择资表单名称" @change="handleResourceTypeChange">
            <el-option label="新区云平台硬件台账" value="gzclybz"></el-option>
            <el-option label="新区云平台硬件检修台账" value="Yjjxybz"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="全局搜索">
          <el-input placeholder="请输入关键字名称" v-model="searchParams.resource_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetAndFetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCreate">新建</el-button>
        </el-form-item>
        <el-button @click="exportAllToExcel">导出数据</el-button>
      </el-form>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @before-close="closeDialog">
      <el-form :label-position="'left'" label-width="120px" :model="formData" :rules="formRules" ref="form">
        <!-- 动态渲染表单字段 -->
        <template v-if="searchParams.resourceTypeTbale === 'YptUserinfo'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" style="width: 100%;" placeholder="姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机" prop="phone">
                <el-input v-model="formData.phone" style="width: 100%;" placeholder="手机"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件号码" prop="id_number">
                <el-input v-model="formData.id_number" style="width: 100%;" placeholder="证件号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别" style="width: 100%;">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birth_date">
                <el-date-picker type="date" placeholder="出生日期" v-model="formData.birth_date" style="width: 100%;"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="ethnicity">
                <el-input v-model="formData.ethnicity" style="width: 100%;" placeholder="民族"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="政治面貌" prop="political_status">
                <el-input v-model="formData.political_status" style="width: 100%;" placeholder="政治面貌"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联络人" prop="emergency_contact">
                <el-input v-model="formData.emergency_contact" style="width: 100%;" placeholder="紧急联络人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话" prop="emergency_phone">
                <el-input v-model="formData.emergency_phone" style="width: 100%;" placeholder="联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家庭地址" prop="home_address">
                <el-input v-model="formData.home_address" style="width: 100%;" placeholder="家庭地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="人员性质" prop="employee_type">
                <el-input v-model="formData.employee_type" style="width: 100%;" placeholder="人员性质"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属单位" prop="company">
                <el-input v-model="formData.company" style="width: 100%;" placeholder="所属单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入司日期" prop="hire_date">
                <el-date-picker type="date" placeholder="入司日期" v-model="formData.hire_date" style="width: 100%;"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最近一次体检时间" prop="last_medical_exam">
                <el-date-picker type="date" placeholder="最近一次体检时间" v-model="formData.last_medical_exam"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合同到期时间" prop="contract_expiry">
                <el-date-picker type="date" placeholder="合同到期时间" v-model="formData.contract_expiry" style="width: 100%;"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最近一次准入时间" prop="last_access_grant">
                <el-date-picker type="date" placeholder="最近一次准入时间" v-model="formData.last_access_grant"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="准入成绩" prop="access_score">
                <el-input v-model="formData.access_score" style="width: 100%;" placeholder="准入成绩"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取证情况" prop="certification_status">
                <el-input v-model="formData.certification_status" style="width: 100%;" placeholder="取证情况"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="最新国网运维考试批次" prop="latest_batch_exam">
                <el-input v-model="formData.latest_batch_exam" style="width: 100%;" placeholder="最新国网运维考试批次"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="初始学历" prop="initial_degree">
                <el-input v-model="formData.initial_degree" style="width: 100%;" placeholder="初始学历"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="initial_school">
                <el-input v-model="formData.initial_school" style="width: 100%;" placeholder="毕业院校"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业" prop="initial_major">
                <el-input v-model="formData.initial_major" style="width: 100%;" placeholder="专业"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业时间" prop="initial_graduation_date">
                <el-date-picker type="date" placeholder="毕业时间" v-model="formData.initial_graduation_date"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" prop="highest_degree">
                <el-input v-model="formData.highest_degree" style="width: 100%;" placeholder="最高学历"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业院校" prop="highest_school">
                <el-input v-model="formData.highest_school" style="width: 100%;" placeholder="毕业院校"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业" prop="highest_major">
                <el-input v-model="formData.highest_major" style="width: 100%;" placeholder="专业"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="毕业时间" prop="highest_graduation_date">
                <el-date-picker type="date" placeholder="毕业时间" v-model="formData.highest_graduation_date"
                  style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属项目" prop="project">
                <el-input v-model="formData.project" style="width: 100%;" placeholder="所属项目"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="办公地点" prop="office_location">
                <el-input v-model="formData.office_location" style="width: 100%;" placeholder="办公地点"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否在职" prop="status">
                <el-input v-model="formData.status" style="width: 100%;" placeholder="是否在职"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="formData.remarks" style="width: 100%;" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>

    <div style="margin: 2%;width: 96%; overflow-x: auto;">
      <el-table :data="listData" border :style="tableStyle">
        <el-table-column v-for="column in displayedColumns" :key="column.prop" :prop="column.prop" :label="column.label"
          v-if="column.visible && column.prop !== 'operation'" :show-overflow-tooltip="true"
          :min-width="column.minWidth || '150px'" :max-width="column.maxWidth" sortable>
        </el-table-column>
        <!-- 操作列特殊处理，始终保持显示 -->
        <el-table-column label="操作" :min-width="'150px'" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="DeleteInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-pagination">
      <el-pagination style="margin: 30px 0px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="perPage"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      listData: [], // 存储列表数据
      searchParams: {
        //  name: '', // 名称搜索参数
        resource_name: '', // 模糊搜索关键字
        resourceTypeTbale: 'YptUserinfo', // 设置默认值
      },
      currentPage: 1, // 当前页码
      perPage: 10, // 每页数量
      total: 0, // 总条数
      displayedColumns: [], // 动态设置表格列
      //新建表单相关参数
      dialogVisible: false,
      //编辑对话框
      dialogTitle: '新增数据', // 根据场景动态改变
      isCreating: true, // 新增时为true，编辑时为false

      resourceTypeTbale: 'YptUserinfo',
      dialogTitle: '',
      formData: {},
      formRules: {
        // 定义表单验证规则
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
        ],
        id_number: [
          { required: true, message: '证件号码不能为空', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码格式', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birth_date: [
          { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        ethnicity: [
          { required: true, message: '民族不能为空', trigger: 'blur' }
        ],
        political_status: [
          { required: true, message: '政治面貌不能为空', trigger: 'blur' }
        ],
        emergency_contact: [
          { required: false, message: '紧急联络人信息为空', trigger: 'blur' }
        ],
        emergency_phone: [
          { required: false, message: '紧急联系电话不能为空', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的紧急联系电话格式', trigger: 'blur' }
        ],
        home_address: [
          { required: false, message: '家庭地址信息为空', trigger: 'blur' }
        ],
        employee_type: [
          { required: true, message: '人员性质不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属单位不能为空', trigger: 'blur' }
        ],
        hire_date: [
          { required: true, message: '请选择入司日期', trigger: 'change' }
        ],
        last_medical_exam: [
          { required: false, message: '请选择最近一次体检时间', trigger: 'change' }
        ],
        contract_expiry: [
          { required: true, message: '合同到期时间不能为空', trigger: 'change' }
        ],
        last_access_grant: [
          { required: false, message: '请选择最近一次准入时间', trigger: 'change' }
        ],
        access_score: [
          { required: false, message: '准入成绩信息为空', trigger: 'blur' }
        ],
        certification_status: [
          { required: false, message: '取证情况信息为空', trigger: 'blur' }
        ],
        latest_batch_exam: [
          { required: false, message: '最新国网运维考试批次信息为空', trigger: 'blur' }
        ],
        initial_degree: [
          { required: false, message: '初始学历信息为空', trigger: 'blur' }
        ],
        initial_school: [
          { required: false, message: '初始毕业院校信息为空', trigger: 'blur' }
        ],
        initial_major: [
          { required: false, message: '初始专业信息为空', trigger: 'blur' }
        ],
        initial_graduation_date: [
          { required: false, message: '请选择初始毕业时间', trigger: 'change' }
        ],
        highest_degree: [
          { required: false, message: '最高学历信息为空', trigger: 'blur' }
        ],
        highest_school: [
          { required: false, message: '最高毕业院校信息为空', trigger: 'blur' }
        ],
        highest_major: [
          { required: false, message: '最高专业信息为空', trigger: 'blur' }
        ],
        highest_graduation_date: [
          { required: false, message: '请选择最高毕业时间', trigger: 'change' }
        ],
        project: [
          { required: false, message: '所属项目信息为空', trigger: 'blur' }
        ],
        office_location: [
          { required: false, message: '办公地点信息为空', trigger: 'blur' }
        ],
        status: [
          { required: false, message: '是否在职信息为空', trigger: 'blur' }
        ],
      },
      tableStyle: {
        width: '100%',
        tableLayout: 'auto',
      },
    };
  },

  methods: {
    fetchData() {
      axios.get('/api/userinfo/search_ybz', {
        params: {
          //   name: this.searchParams.name,
          resource_name: this.searchParams.resource_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          page: this.currentPage,
          per_page: this.perPage,
        }
      }).then(response => {
        this.listData = response.data.data;
        this.total = response.data.meta.total || 0; // 确保total有默认值
      }).catch(error => {
        console.error("Error fetching data:", error);
      });
    },
    //编辑
    edit(row) {
      this.dialogTitle = '编辑数据'; // 更改对话框标题
      this.isCreating = false; // 设置为编辑模式
      this.formData = { ...row }; // 填充表单数据，深拷贝避免引用问题
      this.dialogVisible = true; // 显示对话框
    },

    DeleteInfo(row) {
      console.log('Row Data:', row);
      this.showConfirmDeleteDialog(row);
    },

    // 新增方法：显示确认删除对话框
    showConfirmDeleteDialog(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行删除操作
        this.deleteData(row);
      }).catch(() => {
        // 用户点击取消，不执行任何操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 删除数据的方法
    async deleteData(row) {
      try {
        // 调用后端删除API
        axios.delete(`/api/userinfo/ybzDelete`, {
          params: {
            resourceTypeTbale: this.searchParams.resourceTypeTbale,
            id: row.id
          }
        }); // 假设row.id是需要删除的数据的ID
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 刷新表格数据，具体实现取决于你的数据获取和更新逻辑
        this.fetchData(); // 假设这是你用来刷新列表数据的方法
      } catch (error) {
        console.error('删除失败:', error);
        this.$message.error('删除失败，请重试！');
      }
    },

    //新建表单相关设置
    handleCreate() {
      this.resourceTypeTbale = this.searchParams.resourceTypeTbale; // 根据你的逻辑设置不同的类型
      this.dialogTitle = '新增数据';
      this.formData = {}; // 重置表单数据
      this.isCreating = true;
      this.dialogVisible = true;
    },

    //编辑功能
    submitForm() {
      this.$refs['form'].validate((valid) => { // 验证表单
        if (valid) {
          console.log(this.isCreating);
          if (this.isCreating) {
            // 发送 POST 请求到后端 API
            axios.post('/api/userinfo/ybzCurd', {
              resourceTypeTbale: this.resourceTypeTbale,
              ...this.formData
            }).then(response => {
              this.dialogVisible = false;
              // 处理成功响应
              this.$message({
                message: '资源创建成功',
                type: 'success'
              });
            }).catch(error => {
              // 处理错误响应
              this.$message({
                message: '创建资源失败: ' + error.response.data.message,
                type: 'error'
              });
            });
          } else {
            axios.put('/api/userinfo/ybzEdit', {
              resourceTypeTbale: this.searchParams.resourceTypeTbale,
              ...this.formData
            }, this.formData)
              .then(response => {
                this.$message.success('编辑成功');
                this.dialogVisible = false; // 关闭对话框
                this.fetchData(); // 刷新数据列表
              })
              .catch(error => {
                this.$message.error('编辑失败');
                console.error('编辑请求出错:', error);
              });
          }
        } else {
          return false;
        }
      });
    },

    //关闭编辑对话框
    closeDialog() {
      this.dialogVisible = false;
      this.formData = {}; // 重置表单数据
      this.isCreating = true; // 重置为新增模式
      // 其他可能需要的清理操作
    },

    //----------------分页相关
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.perPage = size;
      this.currentPage = 1;
      this.fetchData();
    },
    resetSearch() {
      const currentResourceType = this.searchParams.resourceTypeTbale; // 保存当前的 resourceTypeTbale
      // this.searchParams = { name: '', resource_name: '', resourceTypeTbale: currentResourceType};
      this.searchParams = { resource_name: '', resourceTypeTbale: currentResourceType };
      this.currentPage = 1;
      this.fetchData();
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    resetAndFetchData() {
      // 重置分页参数并重新查询
      this.currentPage = 1;
      this.fetchData();
    },

    clearAllFormData() {
      // 假设formData包含所有表单项数据
      const defaultValues = {}; // 定义一个对象来存储各字段的默认值，如果需要特定的默认值可在此定义
      for (const key in this.formData) {
        if (this.formData.hasOwnProperty(key)) {
          // 根据字段类型设置合理的默认值
          // 这里简单地设置为空字符串，根据实际情况调整
          this.formData[key] = typeof this.formData[key] === 'string' ? '' : null;
          // 或者使用预定义的默认值
          // this.formData[key] = defaultValues[key] || '';
        }
      }
    },
    handleResourceTypeChange() {
      this.searchParams.resource_name = '';
      this.currentPage = 1;
      this.updateColumns();
      this.fetchData(); // 请求后端数据
      this.clearAllFormData();
    },
    updateColumns() {
      const resourceType = this.searchParams.resourceTypeTbale;
      this.availableColumns = [
        { prop: 'name', label: '姓名' },
        { prop: 'phone', label: '手机' },
        { prop: 'id_number', label: '证件号码' },
        { prop: 'gender', label: '性别' },
        { prop: 'birth_date', label: '出生日期' },
        { prop: 'ethnicity', label: '民族' },
        { prop: 'political_status', label: '政治面貌' },
        { prop: 'emergency_contact', label: '紧急联络人' },
        { prop: 'emergency_phone', label: '联系电话' },
        { prop: 'home_address', label: '家庭地址' },
        { prop: 'employee_type', label: '人员性质' },
        { prop: 'company', label: '所属单位' },
        { prop: 'hire_date', label: '入司日期' },
        { prop: 'last_medical_exam', label: '最近一次体检时间' },
        { prop: 'contract_expiry', label: '合同到期时间' },
        { prop: 'last_access_grant', label: '最近一次准入时间' },
        { prop: 'access_score', label: '准入成绩' },
        { prop: 'certification_status', label: '取证情况' },
        { prop: 'latest_batch_exam', label: '最新国网运维考试批次' },
        { prop: 'initial_degree', label: '初始学历' },
        { prop: 'initial_school', label: '初始毕业院校' },
        { prop: 'initial_major', label: '初始专业' },
        { prop: 'initial_graduation_date', label: '初始毕业时间' },
        { prop: 'highest_degree', label: '最高学历' },
        { prop: 'highest_school', label: '最高毕业院校' },
        { prop: 'highest_major', label: '最高专业' },
        { prop: 'highest_graduation_date', label: '最高毕业时间' },
        { prop: 'project', label: '所属项目' },
        { prop: 'office_location', label: '办公地点' },
        { prop: 'status', label: '是否在职' },
        { prop: 'remarks', label: '备注' },
      ];
      this.displayedColumns = this.availableColumns.map(column => ({ ...column, visible: true }));
    },

    init() {
      this.updateColumns();
      this.fetchData();
    },
    exportAllToExcel() {
      axios.get('/api/userinfo/search_ybz', {
        params: {
          //name: this.searchParams.name,
          resource_name: this.searchParams.resource_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          // 请求所有数据
          page: 1,
          per_page: this.total,
        }
      }).then(response => {
        const allData = response.data.data;

        // 构建表头
        const headers = this.displayedColumns.filter(column => column.visible).map(column => column.label);
        const props = this.displayedColumns.filter(column => column.visible).map(column => column.prop);

        // 构建数据
        const data = allData.map(row => props.map(prop => row[prop]));

        // 添加表头到数据
        data.unshift(headers);

        // 创建工作簿
        const worksheet = XLSX.utils.aoa_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 导出 Excel 文件
        const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');
      }).catch(error => {
        console.error("Error fetching all data:", error);
      });
    }
  },
  mounted() {
    this.init();
  }
};


</script>

<style>
.bottom-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* from 表单样式 */
.el-dialog {
  width: 800px;
  /* 自定义宽度 */
  max-width: 90%;
  /* 保持最大宽度限制，可选 */
  margin-top: 10vh !important;
  /* 调整垂直位置，使对话框居中显示，！important用于覆盖可能的默认样式 */
}

/* 如果需要调整对话框内容区域的大小，可以添加如下样式 */
.el-dialog__body {
  padding: 20px 50px;
  /* 可根据需要调整内边距 */
}

.el-dialog__footer {
  text-align: center;
  /* 按钮居中对齐 */
  /* display: flex; */
  justify-content: center;
  /* 适用于弹性布局，确保按钮在水平方向上居中 */
  align-items: center;
  /* 垂直居中，如果只需要水平居中，这行可以省略 */
  height: 90px;
  /* 自定义底部高度，根据需要调整 */
  /* padding-bottom: 30; 移除默认的内边距，如果有需要的话 */
}

/* 表格表头样式 */
.el-table th .cell {
  white-space: nowrap;
  overflow: visible;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
</style>
